<template>
  <div id="picture-search-form">
    <!--    搜索-->
    <a-form :model="params" :label-col="{ style: { width: '80px' } }">
      <a-collapse v-model:activeKey="activeKey" collapsible="icon" :bordered="false" :ghost="true">
        <a-collapse-panel key="1">
          <template #header>
            <a-form-item label="关键词">
              <a-space>
                <a-input
                  v-model:value="params.searchText"
                  @change="doSearch"
                  placeholder="根据名称和简介查询"
                  allow-clear
                  style="max-width: 100%;"
                />
                <a-button type="primary" @click="doSearch">查询</a-button>
                <a-button type="primary" @click="doReset">重置</a-button>
              </a-space>
            </a-form-item>
          </template>


          <a-form-item label="分类">
            <a-auto-complete
              style="max-width: 100%;"
              v-model:value="params.category"
              @change="doSearch"
              :options="tagCategoryOptions?.categoryList"
              placeholder="根据分类查询"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="标签">
            <a-select
              style="max-width: 100%;"
              mode="multiple"
              v-model:value="params.tags"
              :options="tagCategoryOptions?.tagList"
              @change="doSearch"
              placeholder="根据标签查询"
              allow-clear
            />
          </a-form-item>

          <a-form-item label="日期">
            <a-range-picker
              style="max-width: 100%;"
              show-time
              v-model:value="dateRange"
              format="YYYY/MM/DD HH:mm:ss"
              :presets="rangePresets"
              @change="onRangeChange"
            />
          </a-form-item>

          <a-form-item label="宽度">
            <a-input-number
              v-model:value="params.picWidth"
              @change="doSearch"
              placeholder="根据宽度搜索"
              allow-clear
              :min="10"
              style="max-width: 100%;"
              :step="10"
            />
          </a-form-item>

          <a-form-item label="高度">
            <a-input-number
              v-model:value="params.picHeight"
              @change="doSearch"
              placeholder="根据高度搜索"
              allow-clear
              :min="10"
              style="max-width: 100%;"
              :step="10"
            />
          </a-form-item>

          <a-form-item label="格式">
            <a-select
              style="max-width: 100%;"
              v-model:value="params.picFormat"
              :options="PIC_FORMAT_OPTIONS"
              @change="doSearch"
              placeholder="根据格式查询"
              allow-clear
            />
          </a-form-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { listPictureTagCategoryUsingGet } from '@/api/pictureController.ts'
import dayjs, { Dayjs } from 'dayjs'

const activeKey = ref([''])
// 定义model
const params = defineModel<API.listPictureByPageUsingGETParams>()

interface Props {
  onReload: () => void
  onClear: () => void
}

const props = defineProps<Props>()

type RangeValue = [Dayjs, Dayjs]
// 定义格式label value
const PIC_FORMAT_OPTIONS = [
  { label: 'PNG', value: 'PNG' },
  { label: 'JPEG', value: 'JPEG' },
  { label: 'GIF', value: 'gif' },
  { label: 'BMP', value: 'bmp' },
  { label: 'WEBP', value: 'webp' },
]

// 标签和分类
// 定义标签option和分类option
const tagCategoryOptions = ref<API.PictureTagCategory>({})
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code != 0) {
    return
  }
  tagCategoryOptions.value.tagList = res.data.data.tagList.map((tag) => {
    return {
      label: tag,
      value: tag,
    }
  })

  tagCategoryOptions.value.categoryList = res.data.data.categoryList.map((category) => {
    return {
      label: category,
      value: category,
    }
  })
}

//  重置表单
const doReset = () => {
  dateRange.value = []
  props.onClear()
  props.onReload()
}

// 查询
const doSearch = () => {
  props.onReload()
}

const dateRange = ref<RangeValue>()
// 日期选择
const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
  if (dates) {
    console.log('From: ', dates[0], ', to: ', dates[1])
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
    params.value.beginTime = dates[0].toDate()
    params.value.endTime = dates[1].toDate()
  } else {
    console.log('Clear')
  }
}

const rangePresets = ref([
  { label: '过去1天', value: [dayjs().add(-1, 'd'), dayjs()] },
  { label: '过去1周', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去1月', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去1年', value: [dayjs().add(-365, 'd'), dayjs()] },
])

// 页面渲染完成时，获取数据
onMounted(() => {
  getTagCategoryOptions()
})
</script>
